<template>
  <BasicModal
    v-bind="$attrs"
    width="80%"
    :minHeight="20"
    :showOkBtn="false"
    @register="register"
    :title="modalTitle"
    :loading="loading"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <a-descriptions size="small" :column="3" class="descriptions-style">
        <a-descriptions-item label="设备编码">
          {{ info.Code || '暂无数据' }}
        </a-descriptions-item>
        <a-descriptions-item label="设备名称">
          {{ info.Name || '暂无数据' }}
        </a-descriptions-item>
        <a-descriptions-item label="设备型号">{{
          info.TypeName || '暂无数据'
        }}</a-descriptions-item>
        <a-descriptions-item label="工厂"> {{ info.Factory || '暂无数据' }}</a-descriptions-item>
        <a-descriptions-item label="车间">
          {{ info.Workshop || '暂无数据' }}
        </a-descriptions-item>
        <a-descriptions-item label="产线">
          {{ info.ProductionLine || '暂无数据' }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="tag-box">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-range-picker
            v-model:value="dateRang"
            format="YYYY-MM-DD HH:mm:ss"
            valueFormat="YYYY/MM/DD HH:mm:ss"
            show-time
            @change="onRangeChange"
          />
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { Descriptions, DescriptionsItem, RangePicker } from 'ant-design-vue';
  import { computed, ref, nextTick } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { getequipmenthistorystate } from '/@/api/equipmentLedger/index';
  import dayjs from 'dayjs';

  const ADescriptions = Descriptions;
  const ADescriptionsItem = DescriptionsItem;
  const ARangePicker = RangePicker;
  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  let dateRang = ref([]);
  let StartTime = '';
  let EndTime = '';
  let loading = ref(false);
  let modalTitle = computed(() => {
    return `${props.info.Name} - 设备状态明细`;
  });
  const [register] = useModal();
  // 表单数据
  let columns: BasicColumn[] = [
    {
      title: '状态',
      dataIndex: 'RunStateCn',
    },
    {
      title: '变量',
      dataIndex: 'FullName',
    },
    {
      title: '变量描述',
      dataIndex: 'Name',
    },
    {
      title: '实时值',
      dataIndex: 'RawValue',
    },
    {
      title: '时间戳',
      dataIndex: 'Time',
    },
  ];
  const [registerTable, { getPaginationRef, setPagination, reload }] = useTable({
    title: '',
    api: getequipmenthistorystate,
    immediate: false,
    columns,
    canResize: false,
    showIndexColumn: false,
    striped: true,
    bordered: true,
    fetchSetting: {
      pageField: 'PageNO',
      sizeField: 'PageSize',
      totalField: 'TotalRows',
      listField: 'Rows',
    },
    beforeFetch: () => {
      let params = {
        PageNO: getPaginationRef().current || 1,
        PageSize: getPaginationRef().pageSize || 50,
        FullName: props.info.TagFullName,
      };
      if (StartTime && EndTime) {
        params.StartTime = StartTime;
        params.EndTime = EndTime;
      }

      return [params];
    },
    afterFetch: (v) => {
      let statusConfig = {
        0: {
          color: '',
          txt: '',
        },
        1: {
          color: 'green',
          txt: '运行',
        },
        2: {
          color: '#ccc',
          txt: '待机',
        },
        3: {
          color: 'red',
          txt: '停机',
        },
        4: {
          color: '#red',
          txt: '离线',
        },
        5: {
          color: '#000',
          txt: '调机',
        },
        6: {
          color: '#red',
          txt: '故障',
        },
      };
      v.Time = v.Time && dayjs(v.Time).format('YYYY-MM-DD HH:mm:ss');
      v.RunStateCn = statusConfig[v.RunState].txt;
      return v;
    },
  });
  function onRangeChange() {
    if (dateRang.value && dateRang.value.length >= 2) {
      StartTime = dateRang.value[0];
      EndTime = dateRang.value[1];
    } else {
      StartTime = '';
      EndTime = '';
    }
    onSearch();
  }
  // 搜索方法
  function onSearch() {
    setPagination({
      current: 1,
    });
    reload();
  }
  // 设置可选项
  function handleVisibleChange(visible) {
    if (visible) {
      nextTick(() => {
        onSearch();
      });
    } else {
      dateRang.value = [];
      StartTime = '';
      EndTime = '';
    }
  }
</script>

<style lang="less" scoped>
  .descriptions-style {
    margin-bottom: 20px;
  }
</style>
